<template>
	<view class="content">
		<view class="" style="padding: 0 22rpx;">
			<view class="bgWhite radius6    mt12 info">
				<view class="justify-between align-center"  v-if="detail.price">
					<image :src="detail.image" mode=""></image>
					<view class="flex1 flex-col justify-around" style="height: 180rpx;">
						<view class="name ft16 clamp2">{{detail.title}}</view>
						<view class="">
							<view class="stages">
								{{detail.qishu_price}}×{{detail.qishu||0}}期
							</view>
							<view class="justify-between align-center">
								<text class="money">¥ {{detail.price}}</text>
								<view class="count">
									数量：1
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="remark mt16 justify-between align-center">
					<text>订单备注</text>
					<uv-input placeholder="请留言" input-align="right" border="none" v-model="remark"></uv-input>
				</view>
			</view>
			<view class="bgWhite radius6   mb20 mt15  inlineList" v-if="detail.price">
				<view class="timeBox justify-between align-center ">
					<view class="">商品金额</view> <text>￥{{detail.price}}</text>
				</view>
				<view class="timeBox justify-between align-center " >
					<view class="">支付期数</view> <text>{{detail.qishu}}</text>
				</view>
				<view class="timeBox justify-between align-center " >
					<view class="">每期金额</view> <text>￥{{detail.qishu_price}}</text>
				</view>
				<view class="timeBox justify-between align-center " style="margin-bottom: 0;">
					<view class="">支付方式</view> 
				</view>
			</view>
		</view>
		<view class="" style="height: 130rpx;">
		</view>
		<view class="xyinfo">
			<uv-checkbox-group v-model="checked" @change="changeCheck">
				<uv-checkbox :customStyle="{
					'margin':'0 auto'
				}" activeColor="#49806F" name="apple" label="">
					<template #default>
						<view class="align-center justify-center ft13" style="color: #999;line-height: 1;">
							阅读并签署<text @click.stop="toxy(1)" style="color: #DFC497;">《网签名字合同》</text>
						</view>
					</template>
				</uv-checkbox>
			</uv-checkbox-group>
			<view class="ft10" style="color: #999;">
				*您必须阅读并签署合同才能提交订单
			</view>
		</view>
		<view class="  paybtn">
			<view class="bgWhite justify-between align-center">
				<view class="align-center heji">
					共一件
					<text style="color: #333;margin-left: 10rpx;">合计:</text>
					<text style="color: #DFC497;">￥</text>
					<text style="font-size: 36rpx;font-weight: bold;color: #DFC497;">{{detail.price}}</text>
				</view>
				<view @click="pay" class="onlinePay">提交订单</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				checked: [],
				id: "",
				detail: {},
				remark:"",
				signed:false,
				type:"",
				pdf:""
			}
		},

		onLoad(opt) {
		        if(opt.id) this.id = opt.id
				if(opt.type){
					this.type= opt.type
				this.signed = 	opt.type=='0'?true:false
				} 
		        this.getMain()
		},
		mounted() {
			let vm =this
				uni.$on('success',function(data){
					console.log(data)
					vm.signed=true
					vm.pdf = data
					vm.checked=['apple']
				})
		},
		methods: {
			async getMain() {
		        const {data,code}  =   await this.$api.goodsMain({id:this.id })
		        if(code==1){
		            this.detail = data
					
		            
		        }
			},
			
			changeCheck(val) {
				console.log(val)
				this.checked = val
			},
			toxy(){
				if(this.type==0){
					uni.navigateTo({
						url:'/pages/about/index?type=10'
					})
				}else{
					uni.navigateTo({
						url:'/pages/signAbout/index?type=3'
					})
				}
				
			},
			
			async pay() {
				
				let vm =this
				if(!this.signed) return vm.$utils.msg('请阅读并签署线上协议')
				if(!this.checked.length) return this.$utils.msg('请阅读并签署合同')
				
				
				uni.showModal({
					title:'提示',
					content:'每位网红仅能选择一次商品，请按照实际需要进行下单？',
					success:function(res){
					
						if(res.confirm){
							vm.$api.addorder({
								remark:vm.remark,
								code:"",
								order_amount_total:vm.detail.price,
								d_amount_total:vm.detail.qishu,
								cwf_fee:vm.detail.qishu_price,
								dc_type:"2",
								goods_id:vm.detail.id,
								goods_name:vm.detail.title,
								pdf:vm.pdf
							}).then(res=>{
								if(res.code==1){
									
										uni.showToast({
											title:'下单成功'
										})
										setTimeout(()=>{
											uni.redirectTo({
												url:'/pages/order/index'
											})
										},1000)
									
									
								}else{
									vm.$utils.msg(res.msg)
								}
								
							}).finally(()=>{
								uni.hideLoading()
							})
						}else{
							
						}
					}
				})
				
			}
		}
	}
</script>
<style scoped lang="scss">
	.notice {
		padding: 26rpx 48rpx;
		background: #FCF3EE;
		border: 2rpx solid #F3D6C6;
		font-size: 28rpx;
		color: #F3915B;

		image {
			margin-left: 86rpx;
			width: 60rpx;
		}
	}

	.xyinfo {
		position: fixed;
		bottom: 150rpx;
		left: 22rpx;
	}

	.paybtn {

		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 26rpx;
		z-index: 999;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(103, 103, 103, 0.1);
		background-color: #fff;

		.onlinePay {
			width: 197rpx;
			height: 62rpx;
			background: #3F7865;
			border-radius: 31rpx;


			color: #fff;
			font-size: 28rpx;

			line-height: 62rpx;


			text-align: center;
		}

		.freebtn {
			text {
				color: #FF9012;
			}
		}

	}

	.moduleTitle {
		font-weight: 600;
		color: #000000;
		line-height: 54rpx;
		font-size: 32rpx;
		margin: 30rpx 0 10rpx;
	}

	.swiper {
		image {
			width: 100%;
			height: 300rpx;
		}
	}

	.info {
		padding: 18rpx 14rpx 27rpx 18rpx;

		image {
			width: 237rpx;
			height: 173rpx;
			border-radius: 8rpx;
			margin-right: 27rpx;

		}

		.name {
			color: #222;
			font-weight: bold;
			font-size: 30rpx;
		}

		.address {
			color: #9F9F9F;
		}
	}

	.timeBox {
		color: #999;
		font-size: 32rpx;
		margin-bottom: 40rpx;

		text {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
	}

	.artItem {
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.0612);
		font-size: 24rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 36rpx;
		font-size: 24rpx;
		color: #666666;

		.left {
			width: 224rpx;
			height: 180rpx;
			background: #FFF2F2;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.desc {
			font-weight: 600;
			font-size: 32rpx;
			color: #E6220A;
		}

		.name {
			font-weight: 600;
			font-size: 64rpx;
			color: #E6220A;
		}
	}

	.service {
		width: 140rpx;
		height: 66rpx;
		background: #E6220A;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		line-height: 66rpx;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		margin-right: 20rpx;
	}

	.stages {
		border-radius: 5rpx;
		border: 1px solid #3F7865;
		color: #3F7865;
		font-size: 22rpx;
		display: inline-block;
		line-height: 22rpx;
		margin-bottom: 18rpx;
		padding: 5rpx 8rpx;
	}

	.count {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.inlineList {
		padding: 26rpx 35rpx 40rpx 25rpx;
	}

	.pt20 {
		padding-top: 40rpx;
	}

	.remark {
		background: #F5F5F7;
		border-radius: 8rpx;
		height: 70rpx;
		padding: 0 20rpx;
		margin-top: 32rpx;
	}

	.heji {
		font-size: 28rpx;
		color: #999;
	}
</style>